<template>
  <div width="100%">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>财务管理</span>
      </div>
      <!--搜索-->
      <el-form
        :inline="true"
        :model="formsearch"
        class="demo-form-inline"
        style="padding-right: -17px; padding: 0px 20px"
      >
        <el-form-item label="编号">
          <el-input
            v-model="formsearch.costId"
            placeholder="请输入编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用类型">
          <el-input
            v-model="formsearch.costType"
            placeholder="请输入费用类型"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">查询</el-button>
          <el-button type="primary" @click="reset()">重置</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="onSubmitAdd()"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <!--表格-->
      <el-table :data="IncomeCost">
        <el-table-column prop="costId" label="编号"></el-table-column>
        <el-table-column prop="costName" label="费用名称"></el-table-column>
        <el-table-column prop="costMoney" label="费用金额"> </el-table-column>
        <el-table-column prop="costType" label="费用类型"></el-table-column>
        <el-table-column
          prop="costExplain"
          label="费用说明··"
        ></el-table-column>
        <el-table-column
          prop="costCreateTime"
          label="费用产生说明"
        ></el-table-column>
        <el-table-column
          prop="subjects.subjectName"
          label="项目产生说明"
        ></el-table-column>
        <el-table-column prop="inventory" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="updateemployee(scope.row.costId)"
              >修改</el-button
            >
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="deleteRow(scope.row.costId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formsearch.currentPage"
          :page-sizes="[5, 10, 15]"
          :page-size="formsearch.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="formsearch.totals"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹出修改页面框 -->
    <el-dialog
      title="财务管理"
      :visible.sync="upKapian"
      width="50%"
      style="text-align: center"
    >
      <el-form
        :inline="true"
        class="demo-form-inline"
        v-model="upIncomeCost"
        :rules="rules"
        ref="upIncomeCost"
     
      >
        <el-form-item label="费用名称" prop="costName">
          <el-input
            v-model="upIncomeCost.costName"
            placeholder="请输入费用名称"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="费用金额"
          prop="costMoney"
          style="padding-left: 20px"
             type="text"
        >
          <el-input
            v-model="upIncomeCost.costMoney"
            placeholder="请输入费用金额"
               type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用类型" prop="costType">
          <el-input
            v-model="upIncomeCost.costType"
            placeholder="请输入费用类型"
               type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用说明" prop="costExplain">
          <el-input
            v-model="upIncomeCost.costExplain"
            placeholder="请输入费用说明"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用产生时间" prop="costCreateTime">
          <el-date-picker
            v-model="upIncomeCost.costCreateTime"
            align="left"
            type="date"
            placeholder="请输入费用产生时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="项目产生说明" prop="subjectId">
          <el-select v-model="upIncomeCost.subjectId" placeholder="请选择项目">
            <el-option
              v-for="d in Project"
              :key="d.subjectId"
              :value="d.subjectId"
              :label="d.subjectName"
            ></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" @click="change()">修改员工</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 增加患者信息 -->
    <el-dialog
      title="财务管理"
      :visible.sync="addKapian"
      width="50%"
      style="text-align: center"
    >
      <el-form :inline="true" class="demo-form-inline"  v-model="upIncomeCost" ref="upIncomeCost" :rules="rules" :before-close="handleClose">
        <el-form-item label="费用名称" prop="costName">
          <el-input v-model="upIncomeCost.costName" placeholder="请输入费用名称" type="text"></el-input>
        </el-form-item>
        <el-form-item label="费用金额"  prop="costMoney" style="padding-left: 20px">
          <el-input v-model="upIncomeCost.costMoney" placeholder="请输入费用金额" type="text"></el-input>
        </el-form-item>
        <el-form-item label="费用类型" prop="costType">
          <el-input
            v-model="upIncomeCost.costType"
            placeholder="请输入费用类型"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用说明" prop="costExplain">
          <el-input
            v-model="upIncomeCost.costExplain"
            placeholder="请输入费用说明"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用产生时间" prop="costCreateTime">
          <el-date-picker
            v-model="upIncomeCost.costCreateTime"
            align="left"
            type="date"
            placeholder="请输入费用产生时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="项目产生说明" prop="subjectId">
          <el-select v-model="upIncomeCost.subjectId" placeholder="请选择项目">
            <el-option
              v-for="d in Project"
              :key="d.subjectId"
              :value="d.subjectId"
              :label="d.subjectName"
            ></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" @click="add('upIncomeCost')"
            >新增员工</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formsearch: {
        costId: "",
        costType: "",
        currentPage: 1,
        pageSize: 5,
        totals: 10,
      },
      IncomeCost: [],
      upIncomeCost: {
        costId: "",
        costName: "",
        costMoney: "",
        costType: "",
        costExplain: "",
        costCreateTime: "",
        subjectName: "",
        subjectId: "",
      },
      Project: {},
      upKapian: false,
      addKapian: false,
      rules:{
            costName:[
            {  required: true, message: '请输入支付名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
           ],
           costMoney:[
             {  required: true, message: '请输入支付金额', trigger: 'blur' },
           ],
           costType:[
             {  required: true, message: '请输入支付类型', trigger: 'blur' },
           ],
           costExplain:[
             {  required: true, message: '请输入描述内容', trigger: 'blur' },
           ],
            subjectId:[
            {  required: true, message: '请输入支付部门', trigger: 'blur' },
          ],
    
      },
    };
  },
  methods: {
    onSubmit() {
      this.$axios
        .post("/api/biz/spendingcost/list", this.formsearch)
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            this.IncomeCost = res.data.data.data;
            this.formsearch.totals = res.data.data.totals;
          }
        });
    },
    /**
     * 关闭新增窗口
     */
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          //将内容清空
          this.upIncomeCost={};
          done();
        })
        .catch(_ => {});
    },
    //重置
    reset() {
      (this.formsearch.costId = ""), (this.formsearch.costType = "");
      if (this.formsearch.costId == "" && this.formsearch.costType == "") {
        this.onSubmit();
      }
    },
    //设置每页多少条
    handleSizeChange(pageSize) {
      this.formsearch.pageSize = pageSize;
      this.onSubmit();
    },
    //下一页
    handleCurrentChange(currentPage) {
      this.formsearch.currentPage = currentPage;
      this.onSubmit();
    },
    //修改
    change() {
      this.$axios
        .post("/api/biz/spendingcost/update", this.upIncomeCost)
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            this.$message.success(data.msg);
          } else {
            this.$message.error(data.msg);
          }
          this.upKapian = false;
          this.onSubmit();
        });
    },

    //根据id查询
    updateemployee(id) {
      this.upKapian = true;
      this.$axios.post("/api/biz/spendingcost/selId/" + id).then((res) => {
        this.upIncomeCost = res.data.data;
      });
    },
    //删除
    deleteRow(id) {
      this.$confirm("此操作将永久删除 , 是否继续?", "提示", {}).then(() => {
        this.$axios.post("/api/biz/spendingcost/del/" + id).then((res) => {
          let data = res.data;
          if (data !== null) {
            this.$message.success(data.msg);
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    //添加
    onSubmitAdd() {
   (this.addKapian = true);
    },

    add(forname) {
      this.$refs[forname].validate(valid => {
        if (valid) {
        this.$refs.upIncomeCost.clearValidate();
        retun 
        } else {  
          console.log("请填写完整数据");
          return false;
        }
      });

      this.$axios
        .post("/api/biz/spendingcost/insert", this.upIncomeCost)
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            this.$message.success(data.msg);
          } else {
            this.$message.error(data.msg);
          }
          this.addKapian = false;
          this.onSubmit();
        });
    },
  },
  mounted() {
    //默认加载
    this.upKapian = false;
    this.$axios
      .post("/api/biz/spendingcost/list", this.formsearch)
      .then((res) => {
        if (res.data != null) {
          this.IncomeCost = res.data.data.data;
        }
      });
    //加载下拉框
    this.$axios
      .post("/api/biz/spendingcost/selproject", this.Project)
      .then((res) => {
        this.Project = res.data.data;
      });
  },
};
</script>

<style>
.box-card {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  width: 100%;

  height: 100%;
}
.buttonstyle {
  margin-right: 100%;
}
.box-card {
  width: auto;
  margin-top: 0;
}
</style>
